<template>
	<view class="">
		<uni-section :title="'打卡列表'" type="line"></uni-section>

		<uni-list class="list">
			<template  v-for="(item,index) in 10" :key="index" >
				<view class="" @click="toPage(item)">
					<uni-list-item >
						<template v-slot:header>
							<view class="slot-box headerbox">
								
								<view class="headerIndex">
									{{index + 1}}
								</view>
								<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
							</view>
						</template>
						<template v-slot:body>
							<text class="slot-box slot-text">自定义两侧自定义</text>
						</template>
						<template v-slot:footer>
							<view class="footers">
								<text>333</text> 
								<uni-icons type="heart-filled" size="30" color="#f2f"></uni-icons>
								<uni-icons type="heart" size="30" color="#F25"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</view>
				
			</template>
			
		</uni-list>
		<Empty v-if="list.length == 0"></Empty>	
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { friendList } from '../../api/index.js';
import { uniRouter } from '../../utils/router.js';
import { uniCommon } from '../../utils/common.js';
import Empty from "../../components/Empty.vue"
import {ref} from 'vue'

let list = ref([{}])
onLoad(() => {
	getFriendList();
});

function toPage(item) {
	console.log(item)
	let obj = uniCommon.objectToJson(item);
	uniRouter.push(`/pages/checkInRecordDetail/index?obj=${obj}`);
}
async function getFriendList() {
	try {
		let res = await friendList();
		console.log(res);
	} catch (err) {
		console.log(err);
	}
}
</script>

<style>
.list {
	margin: 30rpx;
}
.headerbox{
	display: flex;
	align-items: center;
	/* background:#333; */
	
}
.slot-image {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	margin-right: 10px;
	height: 80rpx;
	width: 80rpx;
	border-radius: 50%;
	background: #f25;
}

.slot-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}

.slot-text {
	flex: 1;
	font-size: 14px;
	color: #4cd964;
	margin-right: 10px;
}
.footers{
	display: flex;
	align-items: center;
	}
	.headerIndex{
		width:80rpx;
		text-align: center;
	}
</style>
